<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./css/goods.css">
    <title>23201012102--刘启俊--商品详情</title>
</head>
<body>
    <div class="container">
        <div class="goods_banner">
            <div class="slide">
                <ul>
                    <li>
                        <img src="./Image/product/xiaomi/goods/1.jpg" alt="1">
                    </li>
                    <li>
                        <img src="./Image/product/xiaomi/goods/2.jpg" alt="1">
                    </li>
                    <li>
                        <img src="./Image/product/xiaomi/goods/3.jpg" alt="1">
                    </li>
                    <li>
                        <img src="./Image/product/xiaomi/goods/4.jpg" alt="1">
                    </li>
                    <li>
                        <img src="./Image/product/xiaomi/goods/5.jpg" alt="1">
                    </li>
                </ul>
            </div>
        </div>
        <section>
            <div class="p_info">
                <div class="price"><sup>￥</sup>4999</div>
                <div class="goods">
                    <h3>Xiaomi 14 Pro</h3>
                    <p>①【徕卡影像】徕卡可变光圈镜头，光影猎人900影像</p>
                    <p>②【强悍性能】第三代骁龙@8移动平台，小米澎湃OS</p>
                    <p>③【创新好屏】全等深微曲屏，全新小米龙晶玻璃</p>
                </div>
                <ul class="type">
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-box"></use>
                        </svg>
                        <p>CPU</p>
                        <span>第三代骁龙8</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-box"></use>
                        </svg>
                        <p>三摄像头</p>
                        <span>5000万像素</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-box"></use>
                        </svg>
                        <p>超大屏</p>
                        <span>6.73英寸</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-box"></use>
                        </svg>
                        <p>屏幕分辨率</p>
                        <span>3200x1440</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-box"></use>
                        </svg>
                        <p>极速畅玩</p>
                        <span>最高16GB</span>
                    </li>
                </ul>
            </div>
            <div class="goods_info">
                <ul class="info_type">
                    <li>
                        <span>已选</span>
                        <div>Xiaomi 14 Pro 12GB+256GB 黑色 x1</div>
                        <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-jiantouyou"></use>
                                </svg>
                        </div>
                    </li>
                    <li>
                        <span>送至</span>
                        <div>
                            <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-didiandingwei_o"></use>
                            </svg>辽宁省 大连市
                        </div>
                        <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-jiantouyou"></use>
                                </svg>
                        </div>
                    </li>
                    <li>
                        <span>门店</span>
                        <div>小米之家辽宁省大连甘井子区高新万达广场店</div>
                        <div>
                                <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiantouyou"></use>
                                </svg>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="goods_jsh">

                <style>
                    .goods_jsh .tab{
                        width: 100%;
                        margin-top: 2vw;
                        box-shadow: 0 0 2vw #dedede;
                    }
                    .goods_jsh .tt{
                        background-color: #FFF;
                        height: 8vw;
                        line-height: 8vw;
                        font-size: 4vw;
                        display: flex;
                        border-bottom: 1px solid #dedede;
                    }
                    .goods_jsh .tt span{
                        width: 50%;
                        text-align: center;
                        letter-spacing: 1vw;
                        color: #ababab;
                    }
                    .goods_jsh .tt span:nth-child(even){
                        border-left: 1px solid #cbcbcb;
                    }
                    .goods_jsh .tt .cur{
                        color: #ff8000;
                        font-weight: bold;
                    }
                    .goods_jsh .tc{
                        width: 100%;
                        border-top: none;
                        display: none;/* 默认隐藏 */
                    }
                    .goods_jsh .show{
                        display: block;
                    }
                    .goods_jsh > .box{
                        position: relative;
                    }
                    .goods_jsh .tc img{
                        width: 100%;
                        border: none;
                    }

                </style>

                <div class="tab">
                    <div class="tt">
                        <span class="cur">商品介绍</span>
                        <span>规格参数</span>
                    </div>
                    <div class="tc show">
                        <div class="box1">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/1.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/2.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/3.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/4.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/5.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/6.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/7.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/8.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/9.jpg" alt="goods_info">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spjs/10.jpg" alt="goods_info">
                           
                        </div>
                        
                    </div>
                    <div class="tc">
                        <div class="box1">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spcs/canshu.jpg" alt="goods_canshu">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spcs/1.jpg" alt="goods_canshu">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spcs/2.jpg" alt="goods_canshu">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spcs/3.jpg" alt="goods_canshu">
                            <img src="./Image/product/xiaomi/goods/goods_jsh/spcs/4.jpg" alt="goods_canshu">

                        </div>
                    </div>
                </div>
                <script src="./js/tab.js"></script>

            </div>
        </section>
        
        <footer>
            <ul>
                <li onclick="location.href='index.html'">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye2"></use>
                    </svg>
                    <p>首页</p>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                    <p>客服</p>
                </li>
    
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwu"></use>
                    </svg>
                    <p>购物车</p>
                </li>
            </ul>
            <div class="cart">
                <div class="cart_box">加入购物车</div>
            </div>
        </footer>
    </div>
   
</body>

</html>